<template>
  <div class="mac_config">
    <ga-space direction="vertical" fill>
      <div
        class="card_item flex"
        v-for="el in typeList"
        :key="el.value"
        v-show="deviceInfo[el.value]"
      >
        <div class="item_l flex_center">
          <SvgIcon name="bronze_medal" size="20px" />
          <p class="item_l_p">{{ el?.label }}</p>
        </div>
        <div class="item_r">
          <p class="item_r_p" v-for="k in deviceInfo[el.value]?.item" :key="k">
            {{ k || "-" }}
          </p>
          <ga-tag
            size="mini"
            class="tag_style"
            :color="colors[deviceInfo[el.value]?.status]"
          >
            {{ deviceInfo[el.value]?.status }}
          </ga-tag>
        </div>
      </div>
    </ga-space>
    <ga-empty v-if="!deviceInfo" style="margin-top: 15vh" />
  </div>
</template>

<script setup>
import { ref } from "vue";
defineProps({ deviceInfo: Object });
const colors = {
  正常: "#00b42a",
  异常: "#ff5722",
};
const typeList = [
  { value: "cpu", label: "CPU" },
  { value: "memory", label: "内存" },
  { value: "raidCard", label: "阵列卡" },
  { value: "disk", label: "磁盘" },
  { value: "gpu", label: "GPU" },
  { value: "nicCard", label: "网卡" },
];
</script>

<style lang="scss" scoped>
.mac_config {
  width: 40%;
  .card_item {
    min-height: 80px;
    border: 1px solid #e2e8f4;
    background: #f7f9fc;
    border-radius: 4px;
    .item_l {
      width: 100px;
      background: #eff3f9;
      flex-direction: column;
      .item_l_p {
        padding-top: 8px;
        color: #2c4068;
      }
    }
    .item_r {
      flex: 1;
      line-height: 80px;
      padding-left: 16px;
      position: relative;
      color: #2c4068;
      display: flex;
      justify-content: center;
      flex-direction: column;
      .item_r_p {
        height: 24px;
        line-height: 24px;
      }
      .tag_style {
        border-radius: 10px;
        position: absolute;
        right: 8px;
        top: 8px;
      }
    }
  }
}
</style>
